<template>
  <span>
    <template v-if="readonly">
      <img :src="image_url" />
    </template>

    <template v-else> todo Image </template>
  </span>
</template>

<script setup>
import { computed } from 'vue'

import { useWidget } from './userWidget'

const props = defineProps(['modelValue', 'node', 'formInfo'])
const emit = defineEmits(['update:modelValue', 'change'])

const useData = useWidget(props, { emit })

const { readonly } = useData
const { value2, onChange } = useData

const image_url = computed(() => {
  const fname = props.node.name
  const { record = {} } = props.formInfo || {}
  const val = record[fname]
  if (val) {
    return `data:image/png;base64,${val}`
  } else {
    return undefined
  }
})
</script>

<style type="text/css"></style>
